<template>
	<view style="background-color: rgb(247,247,247);padding: 15upx;min-height: 100vh;">
		<u-tabs :list="list" :is-scroll="false" active-color="rgb(255,97,94)" :current="current" @change="change"
			name="title"></u-tabs>
		<scroll-view scroll-x>
			<view class="courseType">
				<view :class="Xindex==index?'courseTypeItem activeColor':'courseTypeItem'"
					v-for="(item ,index) in lists" :key="index" @click="changeType(index)">
					<view class="">
						{{item.title}}
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="course">
			<view class="courseItem" v-for="(item ,index) in commonList" :key="index" @click="navCluster(item)">
				<view class="headImg">
					<image :src="item.pic" mode="aspectFill">
					</image>
				</view>
				<view class="name">
					{{item.title}}
				</view>
				<view class="modality">
					<view class="">
						{{item.school_title}}
					</view>
					<view class="">
						{{item.pattern}}
					</view>
				</view>
				<view class="grade">
					{{item.applicable}}
				</view>
				<view class="money">
					￥{{item.price}}
				</view>
			</view>
		
		
		</view>
	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merch_id:'',
				code:true,
				commonList:[],
				list:[],
				lists:[],
				Xindex:0,
				current:0
			}
		},
		onLoad(e) {
			this.merch_id=e.merch_id
			this.newData()
		},
		methods: {
			newData(){
				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 1,
					num:10,
					page:this.commonList.length
				}, 'POST').then(res => {
					if (res.code == 400) {
					if (res.data.list.length != 10) this.code = false
						res.data.list.forEach(item => {
							item.code1 = item.type.indexOf('2')
							item.code2 = item.type.indexOf('3')
						})
						this.list = res.data.class
						this.list.forEach(item => {
							if (item.en) item.en.unshift({
								title: '全部'
							});
						})
						this.lists = this.list[0].en
						this.commonList.push(...res.data.list)	
						
							
					}
				})
			},
			
			changeType(index) {
				this.Xindex = index
				//普通课程 请求
				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 1,
					num:6,
					aid: this.list[this.current].id,
					bid: this.lists[index].id || ''
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.commonList = res.data.list
					}
				})
			
			},
			change(index) {
				this.current = index;
				this.Xindex = 0
				this.lists = this.list[index].en
				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 1,
					num:6,
					aid: this.list[index].id,
					bid: this.list[index].en[this.Xindex].id || ''
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.commonList = res.data.list
					}
				})
			
			},
			navCluster(item) {
				uni.navigateTo({
					url: `/pages/organizationDetails/clusterHelp/clusterHelp?id=${item.id}`
				});
			},
			onReachBottom(){
				if (this.code) {
					this.newData()
				}else{
					uni.showToast({
					    title: '已经到底了~',
							icon:'none'
					});
				}
			}
		}
	}
</script>


<style lang="less">
	.courseType {
	
		display: -webkit-box;
		background-color: #fff;
		// padding: 0 20upx;
		// padding-bottom: 20upx;
	
	
		.courseTypeItem {
			font-size: 24upx;
			font-weight: 900;
			background-color: rgb(247,247,247);
			color: rgb(115, 115, 115);
			margin: 10upx;
			border-radius: 8upx;
			transition: all .2s;
	
			view {
				padding: 5upx 10upx;
			}
		}
	}
		.course {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			view:nth-child(odd) {
				margin-right: 2%;
			}

			.courseItem {
				width: 49%;
				margin-bottom: 20upx;

				.headImg {
					width: 100%;
					height: 200upx;
					border-radius: 12upx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					font-weight: 900;
					font-size: 28upx;
					margin: 14upx 0;
				}

				.modality {
					width: 100%;
					display: flex;
					font-size: 24upx;
					margin-bottom: 14upx;
					color: #666666;

					view:nth-child(1) {
						margin-right: 40upx;
					}

					view {
						// width: 45%;
						padding: 0upx 10upx;
						background-color: #F4F5F7;
						border-radius: 8upx;
					}
				}

				.grade {
					font-size: 24upx;
					color: #666666;
					// margin: 14upx 0;
					padding: 0upx 10upx;
					border-radius: 8upx;
					background-color: #F4F5F7;
				}

				.money {
					color: rgb(255, 97, 94);
					font-weight: 900;
					font-size: 36upx;
					margin-top: 14upx;
				}
			}
		}
		.activeColor {
			background-color: rgba(248, 95, 0, .1) !important;
			color: rgb(255,97,94) !important;
		
		}
</style>
